<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Java应用监控</title>
<link rel="shortcut icon" href="/ico/favicon.ico" />
<link rel="stylesheet" href="/lib/layui/css/layui.css" />
</head>
<style>
.layui-layout-admin .layui-body {
	bottom: 0px;
}
</style>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header" style="width: 200px">
			<div class="layui-logo">Java应用监控</div>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<!--首页-->
					<li class="layui-nav-item">
						<a onclick="index()" href="javascript:void(0)">
							<i class="layui-icon">&#xe68e;</i>&nbsp;首页
						</a>
					</li>
					<!--远程主机-->
					<li class="layui-nav-item" th:each="item:${list}">
						<a href="javascript:void(0)">
							<i class="layui-icon">&#xe665;</i>&nbsp;
							<span th:text="${item.get('address').name}"></span>
						</a>
						<dl class="layui-nav-child" th:each="j:${item.get('jps')}">
							<dd>
								<a th:onclick="'step(\''+${item.get('address').address}+'\','+${j.key}+')'"
									href="javascript:void(0)" th:text="${j.value.smallName}"></a>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<!-- 内容主体区域 -->
		<div class="layui-body" style="top: 0px; overflow-y: hidden">
			<iframe id="iframe" height="100%" width="100%" src="/main" frameborder="no" allowtransparency="yes"></iframe>
		</div>
	</div>
	<script src="/lib/layui/layui.all.js"></script>
	<script type="text/javascript" src="/lib/jquery.min.js"></script>
	<script type="text/javascript">
		function step(address, id) {
			$("#iframe").attr("src", "/monitor?pid=" + id + "&address=" + address);
			//加载动画
			layer.load();
			setTimeout(function() {
				layer.closeAll('loading');
			}, 2000);
		}
		function index() {
			$("#iframe").attr("src", "/main");
		}
	</script>
</body>
</html>